语法
animation-name: none | <identifier> [ , none | <identifier> ]*;定义一个或多个动画名称。
| 语法项目 | 说明 |
|---|---|
| 初始值 | none |
| 适用于 | 所有元素 |
| 可否继承 | 否 |
| 媒介 | 视觉 |
| 版本 | CSS3.0 |
说明
检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 如果提供多个属性值，以逗号进行分隔。
如何开始进行动画
@keyframes相当于一个命名空间，后面跟一个名词，如果在class中的animation-name定义了与之对应的name，那么就可以执行动画了。定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：如：
@-webkit-keyframes demo{
from{left:0;}
to{left:400px;}
}
复杂动画：
@-webkit-keyframes demo{
0%{left:0;}
50%{left:200px;}
100%{left:400px;}
}
这里面的百分百有点像flash里帧的概念。表示设置某个时间段内任意时间点的样式。
取值
none：不引用任何动画名称
identifier：定义一个或多个动画名称(identifier标识)
实例代码
CSS
.animation_name{
left:0;
top:100px;
position:absolute;
-webkit-animation:0.5s 0.5s ease infinite alternate;
-webkit-animation-name:demo;
-moz-animation:0.5s 0.5s ease infinite alternate;
-moz-animation-name:demo;
}
@-webkit-keyframes demo{
0%{left:0;}
100%{left:400px;}
}
HTML
运行一下 »
纯CSS焦点图效果 »
<div class="demo_box animation_name">看我没事来回跑</div>
兼容性
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | 目前暂无版本支持 | Safari 10+ | Chrome 2.0+ |